<template>
  <div class="search-top">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="search(value)"
      :autofocus="temp"
    />
    <div class="search-top-p" @click="goback">×</div>
  </div>
  <div class="search-sort">
    <p
      v-for="(item, index) in listp"
      :key="item"
      @click="change(index)"
      :class="{ active: index == item1 }"
    >
      {{ item }}
    </p>
  </div>
  <div class="search-list">
    <li v-for="item in list" :key="item" @click="gotodetail(item.productId)">
      <img :src="item.imgURL[0]" alt="" />
      <p class="search-list-p1">{{ item.productName }}</p>
      <p class="search-list-p2">{{ item.title }}</p>
      <p class="search-list-p3">￥{{ item.discounts }}</p>
    </li>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      listp: ["综合", "销量", "价格"],
      item1: "",
      list: [],
      uparr: [],
      count: 0,
      temp: true,
    };
  },

  computed: {
    ...mapState("logreg", ["searchName"]), //获取tlist
  },
  methods: {
    //返回上一页
    goback() {
      this.$router.go(-1);
    },
    //进入详情页
    gotodetail(id) {
      this.$router.push("/detail/" + id);
    },
    //点击改变字体颜色和大小
    change(ev) {
      this.item1 = ev;
      if (this.item1 == 2) {
        this.count++;
        if (this.count == 1) {
          //实现价格升序
          for (let i = 0; i < this.list.length - 1; i++) {
            for (let j = 0; j < this.list.length - 1; j++) {
              let price_up = this.list[j].discounts;
              let price_down = this.list[j + 1].discounts;
              if (price_up > price_down) {
                let temp = this.list[j];
                this.list[j] = this.list[j + 1];
                this.list[j + 1] = temp;
              }
            }
          }
        } else if (this.count == 2) {
          //实现价格降序
          for (let i = 0; i < this.list.length - 1; i++) {
            for (let j = 0; j < this.list.length - 1; j++) {
              let price_up = this.list[j].discounts;
              let price_down = this.list[j + 1].discounts;
              if (price_up < price_down) {
                let temp = this.list[j];
                this.list[j] = this.list[j + 1];
                this.list[j + 1] = temp;
              }
            }
          }
          this.count = 0;
        }
      }
    },
    //获取搜索栏中的value值
    search(ev) {
      this.getDate(ev);
    },
    //异步请求商品信息
    async getDate(ev) {
      await this.getSearchactions({
        name: ev,
      });
      this.list = this.searchName;
    },
    ...mapActions("logreg", ["getSearchactions"]),
  },
};
</script>

<style lang="less">
.active {
  color: black;
  font-weight: bold;
}
body {
  background: #fff;
}
.search-top {
  display: flex;
  .search-top-p {
    color: rgb(201, 198, 198);
    font-size: 40px;
    margin-right: 10px;
  }
}
.van-search {
  flex: 1;
}
.van-search__content {
  background: #fff !important;
  border: 1px solid rgb(226, 226, 226);
  .van-badge__wrapper {
    font-size: 20px;
    color: rgb(226, 226, 226);
  }
}
.van-sidebar-item--select::before {
  background-color: transparent;
}
.search-sort {
  display: flex;
  font-size: 16px;
  color: rgb(153, 147, 147);
  p {
    padding: 10px 12px;
  }
}
.search-list {
  background: rgb(248, 248, 248);
  height: 100%;
  // column-count: 2;
  // break-inside: avoid;
  // column-gap: 5px;
  // break-inside: avoid;
  display: flex;
  flex-wrap: wrap;

  li {
    padding: 10px;
    width: 45%;
    margin: 10px 0px 10px 10px;
    height: 290px;
    background: #fff;
    border-radius: 5px;
    img {
      width: 70%;
      height: 150px;
      margin: 0px 15%;
      border-radius: 5px;
      box-shadow: #a0a0a0 1px 2px 3px;
    }
    .search-list-p1 {
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-list-p2 {
      color: #a0a0a0;
      font-size: 14px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-list-p3 {
      color: #ff2442;
      font-size: 18px;
      text-align: left;
      font-weight: bold;
    }
  }
}
</style>
